<template>
	<div id="main"  style="width: 100%;">
		<div ref="main" style="width: 500px;height: 500px;margin: 20px auto;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default{
		data(){
			return{
				option:{
					title: {
						text: '访问设备统计图'
					}, 
					  tooltip: {
						trigger: 'item'
					  },
					  legend: {
						top: '7%',
						left: 'center'
					  },
					  series: [
						{
						  name: '设备统计',
						  type: 'pie',
						  radius: ['40%', '70%'],
						  avoidLabelOverlap: false,
						  itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						  },
						  label: {
							show: false,
							position: 'center'
						  },
						  emphasis: {
							label: {
							  show: true,
							  fontSize: '40',
							  fontWeight: 'bold'
							}
						  },
						  labelLine: {
							show: false
						  },
						  data: [
							{ value: 121, name: 'Windows' },
							{ value: 55, name: 'Android' },
							{ value: 12, name: 'IOS' },
							{ value: 0, name: 'Linux' },
							{ value: 1, name: '其他' }
						  ]
						}
					  ]
					}
			}
		},
		mounted(){
			this.initEcharts();
			this.getTypeDate();
		},
		methods:{
			getTypeDate(){
				this.$axios.post("/user/readerinfo").then(res => {

						// this.option.series[0].data = JSON.parse(res.data)
						// console.log(this.option.series[0].data[0].value);
						// this.$forceUpdate()
				})
			},
			initEcharts(){
				let myChart = echarts.init(this.$refs.main);
				myChart.setOption(this.option);
			}
		},

	} 
</script>

<style scoped> 
	
</style>
